<template>
  <v-card>
    <v-card-text>
      <v-row>
      <v-col cols="6">
        <v-card-title class="text-base font-semibold pl-1 mb-3 pt-2 text-[#95909C]">
          {{ t('message.dashboard.identity.title') }}
        </v-card-title>
        <v-card-text class="text-[24px] pl-1 pb-3 text-[#736B7D]">
          {{ resolveRole(role) }}
        </v-card-text>

        <v-card-text class="d-flex flex-row align-center font-semibold text-[#9255FD] pb-0 pl-1">
          <v-avatar
            color="#F2EAFF"
            class="v-avatar-light-bg"
            size="20"
          >
            <span class="text-sm text-[#9255FD]">?</span>

            <v-tooltip
              activator="parent"
              location="right"
            >
              {{ t('message.dashboard.identity.intro') }}
            </v-tooltip>
          </v-avatar>
        </v-card-text>
      </v-col>
      <v-col
        cols="6"
        class="d-flex align-end"
      >
        <v-img :src="sharkBg" class="shark-img"></v-img>
      </v-col>
    </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import sharkBg from '@/assets/images/home/ido-bg1.png'
import {resolveRole} from '@/utils'
import {toRefs} from "vue";
import {useI18n} from "vue-i18n";

interface IdentityProps {
  role: number,
}

const props = withDefaults(defineProps<IdentityProps>(), {
  role: 1
})

const {role} = toRefs(props)

const {t} = useI18n()

</script>

<style lang="scss" scoped>
.shark-img{
  @apply w-48 h-28;
}
</style>
